<template>
  <div class="p-2">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card shadow="hover">
          <template #header>
            <Monitor style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">基本信息</span>
          </template>
          <el-descriptions v-loading="dataLoading" class="custom-descriptions" :column="3">
            <el-descriptions-item label="内存使用率: ">
              {{ `${systemInfo.memPer}%` }}
            </el-descriptions-item>
            <el-descriptions-item label="Cpu使用率: ">
              {{ `${systemInfo.cpuPer}%` }}
            </el-descriptions-item>
            <el-descriptions-item label="Cpu内核数: ">
              {{ systemInfo.cpuCoreNum }}
            </el-descriptions-item>
            <el-descriptions-item label="Cpu型号: " :span="3">
              {{ systemInfo.cpuXh }}
            </el-descriptions-item>
            <el-descriptions-item label="系统版本: " :span="3">
              {{ systemInfo.version }}
            </el-descriptions-item>
            <el-descriptions-item label="系统版本详情: " :span="3">
              {{ systemInfo.versionDetail }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card shadow="hover">
          <template #header>
            <PieChart style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">Cpu使用率</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <CpuState style="height: 420px" :cpu-perscent="cpuPercnet" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card shadow="hover">
          <template #header>
            <Odometer style="width: 1em; height: 1em; vertical-align: middle" /> <span style="vertical-align: middle">内存信息</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <MemoryState style="height: 420px" :memory-info="memoryInfo" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card shadow="hover">
          <template #header>
            <Operation style="width: 1em; height: 1em; vertical-align: middle" /> <span style="vertical-align: middle">模块在线情况</span>
          </template>
          <div v-loading="dataLoading">
            <template v-if="Array.isArray(jarList) && jarList.length > 0">
              <el-row :gutter="20">
                <el-col v-for="(module, index) in jarList" :key="index" :span="6">
                  <ModelUsage
                    :jar-name="module.jarName"
                    :model-state="module.modelState"
                    :jar-memory-usage="module.jarMemoryUsage"
                    :jar-pid="module.jarPid"
                    :jar-cmd="module.jarCmd"
                  />
                </el-col>
              </el-row>
            </template>
            <el-empty v-else description="暂无数据" style="height: 100%" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <div>
                <MessageBox style="width: 1em; height: 1em; vertical-align: middle" /> <span style="vertical-align: middle">磁盘使用情况</span>
              </div>
              <div style="width: 600px">
                <horizontalList :disk-all-info="diskAllInfo" :limit-percent="limitPercent" />
              </div>
              <el-form :inline="true" label-width="100px">
                <el-form-item label="告警阈值">
                  <el-input-number v-model="limitPercent" :min="1" :max="100" placeholder="请选择告警阈值" />
                </el-form-item>
              </el-form>
            </div>
          </template>
          <div v-loading="dataLoading">
            <template v-if="Array.isArray(diskStateList) && diskStateList.length > 0">
              <el-row :gutter="20">
                <el-col v-for="(item, idx) in diskStateList" :key="idx" :span="8">
                  <DiskUsage
                    disk-img="/src/assets/images/HardDisk.png"
                    :disk-name="item.fileSystem"
                    :disk-size="item.size"
                    :disk-used="item.used"
                    :disk-avail="item.avail"
                    :use-percent="item.usePer"
                    :limit-percent="limitPercent"
                  />
                </el-col>
              </el-row>
            </template>
            <el-empty v-else description="暂无数据" style="height: 100%" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Cache" lang="ts">
import { getSystemStateByTimeAPI, getSystemStateByCacheAPI } from '@/api/monitor/systemState';
import horizontalList from './components/horizontalList.vue';
import DiskUsage from './components/diskUsage.vue';
import ModelUsage from './components/modelUsage.vue';
import CpuState from './components/cpuState.vue';
import MemoryState from './components/memoryState.vue';
import type { MemoryInfo, SystemInfoType, DiskAllInfo } from './types/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const dataLoading = ref(false);

const cpuPercnet = ref(0);
const diskStateList = ref([]);
const totalJarList = [
  'soc-log.jar',
  'soc-system.jar',
  'soc-workflow.jar',
  'soc-gateway.jar',
  'soc-gather.jar',
  'soc-asset.jar',
  'soc-resource.jar',
  'soc-auth.jar'
];
const jarList = ref([]);
const systemInfo = ref<SystemInfoType>({});
const diskAllInfo = ref<DiskAllInfo>({});
const limitPercent = ref(80);
const memoryInfo = ref<MemoryInfo>({
  usePercent: 0,
  total: '0G',
  free: '0G',
  used: '0G'
});
// 【新增】定义事件处理器
const handleCleanup = (diskName: string) => {
  // 在实际应用中, 你可以在这里打开一个模态框或调用清理 API
  alert(`父组件收到清理请求: ${diskName}`);
  console.log(`Cleanup event received for disk: ${diskName}`);
};
//获取状态信息
async function getStateInfo() {
  dataLoading.value = true;
  try {
    const res = await getSystemStateByTimeAPI();
    if (Array.isArray(res.data.diskStateList)) {
      diskStateList.value = res.data.diskStateList.filter((item) => item.fileSystem != 'all');
      diskAllInfo.value = res.data.diskStateList.find((item) => item.fileSystem == 'all');
    }

    jarList.value = totalJarList.map((item) => {
      let result;
      if (Array.isArray(res.data?.jarList)) {
        result = res.data?.jarList?.find((jar) => jar['jar_name'] == item);
      }
      if (!result) {
        return {
          'jarName': item,
          'modelState': '离线',
          'jarMemoryUsage': 0,
          'jarPid': '',
          'jarCmd': ''
        };
      } else {
        return {
          'jarName': item,
          'modelState': '在线',
          'jarMemoryUsage': result['jar_memory_usage'],
          'jarPid': result['jar_pid'],
          'jarCmd': result['jar_cmd']
        };
      }
    });
    systemInfo.value = res.data.systemInfo;
    cpuPercnet.value = res.data?.cpuState?.cpuUsage ?? 0;
    memoryInfo.value = {
      usePercent: res.data?.memState?.usePer ?? 0,
      total: res.data?.memState?.total ?? '0 G',
      free: res.data.memState.free ?? '0 G',
      used: res.data.memState.used ?? '0 G'
    };
  } finally {
    dataLoading.value = false;
  }
}

onMounted(() => {
  getStateInfo();
});
</script>
<style lang="scss" scoped>
/* 最佳实践方案 */
// .custom-descriptions :deep(.el-descriptions__table tr) {
//   border-bottom: 1px solid var(--el-border-color);
// }

// .custom-descriptions :deep(.el-descriptions__table tr:last-child) {
//   border-bottom: none !important;
// }

/* 调整单元格内边距 */
// .custom-descriptions :deep(.el-descriptions__label) {
//   padding: 12px 10px;
// }
.custom-descriptions :deep(.el-descriptions__label) {
  width: 110px; /* 固定label宽度 */
  display: inline-block; /** 让宽度对span生效 */
  text-align: right;
  padding-right: 12px;
  color: #666;
  font-weight: normal;
  background: #f8f9fa;
}
</style>
